<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="zs-table-page-container">
        <div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
            <span>
                <el-select v-model="queryParams.projectCode" filterable class="zs-select-md zs-space-right-sm"
                    placeholder="项目名称">
                    <el-option v-for="item in projectList" :key="item.biProjectCode" :label="item.projectName"
                        :value="item.biProjectCode" />
                </el-select>
                <el-date-picker class="zs-select-md zs-space-right-sm" v-model="queryParams.years" type="year"
                    placeholder="年份" value-format="YYYY" :clearable="false" />
                <el-select v-model="queryParams.abnormalType" class="zs-select-md zs-space-right-sm" placeholder="异常类型"
                    :teleported="false" clearable>
                    <el-option v-for="(item, index) in abnormalTypeList" :key="index" :label="item" :value="item" />
                </el-select>
                <el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
                    <template #reference>
                        <el-button class="zs-btn-square-solid"
                            :class="{ 'zs-btn-square-solid-active': queryParams.liftPoleType }">
                            <el-icon>
                                <MoreFilled />
                            </el-icon>
                        </el-button>
                    </template>
                    <template #default>
                        <el-select v-model="queryParams.liftPoleType" class="zs-select-md zs-space-right-sm"
                            placeholder="抬杆类型" :teleported="false" clearable>
                            <el-option v-for="(item, index) in liftPoleTypeList" :key="index" :label="item" :value="item" />
                        </el-select>
                    </template>
                </el-popover>
                <el-button class="zs-btn-plain" @click="queryList()">查询</el-button>
            </span>
            <span class="zs-layout-flex-row">
                <el-button class="zs-btn-plain" @click="handleDownload"><el-icon class="el-icon--left">
                        <Upload />
                    </el-icon>导出</el-button>
            </span>
        </div>
        <div class="zs-card zs-table-page-content">
            <hsPageTable :loading="tableData.loading" :total="tableData.total" :tableData="tableData.data"
                :tableTips="tableData.tableTips" :cloumns="tableData.cloumns" @pageChange="pageChange">
                <!-- <template #column>
                    <el-table-column label="操作" width="100" align="center">
                        <template #default="{ row }">
                            <el-button class="zs-link" link size="small" @click="handleJumpMapPage(row)">查看</el-button>
                        </template>
                    </el-table-column>
                </template> -->
            </hsPageTable>
        </div>
    </div>
</template>
  
<script setup>
import dbPublicApi from '@/api/dbPublic'
import { abnormalMonthlyDetailApi, abnormalMonthlyDetailExportApi } from '@/api/Manage/Business/detailPages'
import { ref, reactive } from 'vue'
import { toThousands } from '@/utils/number-util'
import { downloadNewFile } from "@/utils/publicUtils"
import { useRoute } from 'vue-router'
import { useStore } from "vuex";
let store = useStore();
const route = useRoute()
const curPageSize = ref(store.state.uiPageSizeDefault);
const { biProjectCode, dataTime, resourceKey } = route.query

let abnormalTypeList = ref(['车辆识别异常', '特殊车辆放行', '查无入场信息', '凯悦优惠', '珑庭优惠', '超时2分钟内', '其他'])
let liftPoleTypeList = ref(['正常放行', '人工放行', '手动开闸', '异常放行'])

let queryParams = reactive({
    pageNum: 1,
    pageSize: curPageSize.value,
    projectCode: biProjectCode,//项目Code	
    years: '',
    abnormalType: '',
    liftPoleType: '',
})

let tableData = reactive({
    loading: false,
    total: 0,
    data: [],
    cloumns: [
        { prop: "carNo", label: "车牌号", align: "center", width: '100' },
        { prop: "inTime", label: "进场时间", align: "center", width: '160' },
        { prop: "outTime", label: "出场时间", align: "center", width: '160' },
        { prop: "parkHours", label: "停留时长", align: "center", width: '110' },
        { prop: "receiveAmount", label: "异常费用", align: "right", type: 'customMethods', methods: (row) => toThousands(row.receiveAmount) },
        { prop: "workspaceName", label: "放行出口", align: "center" },
        { prop: "carMobile", label: "联系方式", align: "center" },
        { prop: "chargeName", label: "收费员", align: "center" },
        { prop: "liftPoleType", label: "抬杆类型", align: "center" },
        { prop: "abnormalType", label: "异常类型", align: "center" },
        { prop: "abnormalDesc", label: "异常描述", align: "left"},
        { prop: "checkName", label: "审核人", align: "center" },
        { prop: "checkStatus", label: "审核状态", align: "center" },
    ],
    tableTips: ['*异常费用：元']
})
// 分页变化
function pageChange(page) {
    queryParams.pageNum = page.current
    queryParams.pageSize = page.pageSize
    queryList()
}
function queryList() {
    tableData.loading = true
    abnormalMonthlyDetailApi(queryParams).then(res => {
        let resData = res.data
        if (resData.errorCode == 200) {
            tableData.data = resData.data
            tableData.total = resData.totalCount
        }
        tableData.loading = false
    })
}

let projectList = ref([]) // 项目列表
// 获取项目列表
const getPorjectList = async () => {
    await dbPublicApi.queryProjectPcApi({ dataTime, resourceKey }).then((res) => {
        if (res.data.code == 200) {
            projectList.value = res.data.data
        }
    })
}

const queryDataUpdateTime = async () => {
    await dbPublicApi.queryMonthsTimeApi().then(res => {
        let resData = res.data
        if (resData.code == 200) {
            queryParams.years = resData.data.split('-')[0]
        }
    })
}

const init = async () => {
    getPorjectList()
    await queryDataUpdateTime()
    queryList()
}
init()

// 导出
async function handleDownload() {
    const fileName = `月度明细.xls`;
    let fileData = await abnormalMonthlyDetailExportApi(queryParams);
    downloadNewFile(fileData.data, fileName);
}

</script>
  
<style lang="scss" scoped></style>
  